<template>
  <div class="wp100">
    <Skeleton v-if="loading">
      <SkeletonLine :lines="1" :height="28" />
    </Skeleton>
    <Tab v-show="!loading" type="rounded" v-if="rows.length" @change="onChange" :showContent="false">
      <TabItem :key="row.id" :title="row.name" v-for="row in rows" />
    </Tab>
  </div>
</template>

<script setup lang="ts">
import { Tab, TabItem } from '@idmy/ui'
import { allProjects } from './services'

defineOptions({ name: 'ProjectTab' })

const emit = defineEmits(['change'])

const rows = ref([])
const [_, loading] = useLoading(async () => {
  rows.value = await allProjects()
  if (rows.value.length) {
    onChange(rows.value[0].id)
  }
}, true)

const onChange = id => {
  emit(
    'change',
    rows.value.find(item => item.id === id)
  )
}
</script>
